<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <title>填写信息</title>
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="__PUBLIC__/css/YD_calendar.min.css" />
    <link rel="stylesheet" href="__PUBLIC__/css/LArea.css" />
    <link rel="stylesheet" href="__PUBLIC__/css/bzjp_bmf_lq.css" />

    <link rel="stylesheet" href="__PUBLIC__/css/ZM_share.css" />
    <script src="__PUBLIC__/js/jquery.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/rem.js"></script>
    <style>
      body {
        margin: 0;
      }
      [v-cloak] {
        display: none !important;
      }
      .wrap {
        width: 100%;
      }
      .wrap img.banner {
        width: 100%;
        height: auto;
        display: block;
      }
      .wrap .btns {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #20a182;
        /* margin-top: -5vw; */
      }
      .wrap .btns img {
        width: 22.4vw;
        height: 9vw;
        flex: none;
      }
      .wrap .btns img.break-line {
        flex: none;
        width: 0.8vw;
        height: auto;
      }

      /* 内容块公共背景 */
      .content-wrap {
        background-color: #20a182;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 4vw 1.6vw;
        box-sizing: border-box;
      }
      .content-wrap .img-title {
        height: 9.333vw;
        width: auto;
        border-radius: 10px 10px 0 0;
      }
      /* 底部公共按钮块 */
      .bottom-btn-wrap {
        width: 100%;
        height: 27.6vw;
        background: url("__PUBLIC__/images/pai/img_dizuo.png") no-repeat center
          center;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .bottom-btn-wrap .btn,
      .return-home {
        width: 94.7vw;
        height: 13.333vw;
        background-image: linear-gradient(0deg, #ffd134 0%, #fffac4 100%);
        border-radius: 10px;
        display: flex;
        flex: none;
        justify-content: center;
        align-items: center;
        font-size: 4.8vw;
        color: #ac3f09;
      }
      .bottom-btn-wrap div.stop-wash {
        margin-top: 1vw;
      }
      .bottom-btn-wrap p {
        margin-top: 1vw;
        font-size: 2.93vw;
        color: #fff;
      }
      .bottom-btn-wrap p.xuanpai {
        font-size: 3.733vw;
      }
      .bottom-btn-wrap p.yuan3 {
        font-size: 3.733vw;
        margin: 1vw 0 1.5vw;
      }
      .bottom-btn-wrap p.yuan3 span {
        text-decoration: line-through;
        font-size: 3.733vw;
        margin: 1vw 0 1.5vw;
      }
      /* 信息填写 */
      .userform-wrap {
      }
      .userform-wrap .img-title {
      }
      .userform-wrap .m_item,
      .paiyi-content {
        width: 100%;
        border-radius: 0 0 10px 10px;
        overflow: hidden;
        background-color: #fffdf5;
      }
      .userform-wrap .m_item .m_wrap {
        background-color: transparent;
      }
      .userform-wrap .m_item .m_form_ul li {
        height: 15.47vw;
        border: none;
        background-color: #fffdf5;
        border-bottom: 1px solid #cdcdcd;
      }
      .userform-wrap .m_item .m_form_ul li:last-child{
        border-bottom: none;
      }
      .userform-wrap .m_item .m_form_ul li .f_left {
        font-size: 4.933vw;
        color: #491716;
        display: flex;
        font-weight: 600;
        justify-content: center;
        align-items: center;
      }
      .m_form_ul li .f_auto input{
        line-height: 100%;
        vertical-align: middle
      }
      .userform-wrap .m_item .m_form_ul li .f_auto {
        font-size: 4.27vw;
        display: flex;
        align-items: center;
      }
      .userform-wrap .m_item .m_form_ul li .f_auto label {
        height: 100%;
        display: flex;
        align-items: center;
      }
      .gif-wrap .gif {
        width: 93.2vw;
        height: auto;
      }
      .gif-wrap .gif-pk {
        width: 81.47vw;
        height: auto;
      }
      .many-img,
      .paying {
        width: 100%;
        padding: 4vw 1.6vw;
        box-sizing: border-box;
      }
      .many-img img,
      .paying img {
        display: block;
        width: 100%;
        height: auto;
      }
      .paiyi-content.ss {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding:5.2vw 4vw;
        margin-bottom: 5vw;
        box-sizing: border-box;
      }
      .paiyi-content.ss > img {
        display: block;
        height: auto;
      }
      .paiyi-content.ss .pai-pk-unit {
        width: 37.333vw;
      }
      .paiyi-content.ss .pai-mj-unit {
        width: 42.667vw;
      }
      .paiyun-result p {
        text-align: center;
      }
      .paiyun-result .row {
        display: flex;
        align-items: flex-start;
        font-size: 4.2667vw;
        min-height: 4.5vw;
        margin-top: 2vw;
      }
      .paiyun-result .paiyi-title {
        color: #e52628;
        flex:none;
      }
      .paiyun-result .paiyi-title.pm {
        color: #491716;
      }
      .paiyun-result .paiyi-contents {
        color: #333333;
        width:100%;
        flex:auto;
        display: flex;
        justify-content: flex-start;
      }
      /*修正input[radio]垂直不居中*/
      .f_auto label{
        align-items: center;
        display: flex;
      }
      .select{
        display: flex;
        justify-content: center;
        align-items: center;
        color: #cdcdcd;
      }
      .select.active{
        color: #333;
      }
      .public_pp_price .origin-price{
        text-decoration: line-through;
        padding-left: 10px;
        color: #3a3a3a;
      }
      .ready-for-pay.majiang-unlock{

      }
      .ready-for-pay .ready-for-pay-body{
        border-radius: 0 0 10px 10px;
        background-color: #fff;
        padding: 6.9vw 1.3vw 5.1vw;
        box-sizing: border-box;
      }
      .ready-for-pay .user-row{
        color: #ac3f09;
        padding-left:2.67vw ;
        box-sizing: border-box;
      }
      .ready-for-pay .user-row-tt1{
        font-size: 5.333vw
      }
      .ready-for-pay .user-row-tt1{
        font-size: 4.8vw
      }
      .ready-for-pay .majiangpai{
        width: 34.8vw;
        display: block;
        height: auto;
        margin: 5.6vw auto 4vw;
      }
      .ready-for-pay .youdaopay{
        width: 92vw;
        display: block;
        height: auto;
        margin: 6.13vw auto 0;
      }
      .f_auto label {
        display: flex;
        height:auto;
        display: flex;
        align-items: center;
      }
      .f_auto label>div{
        height: 20px;
        width: 20px;
        display: block;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid #cdcdcd;
        margin-right: 10px;
      }
      .f_auto label div.active{
        border-color: #E44848;
      }
      .f_auto label div.active div{
        border-radius: 50%;
        width: 16px;
        height:16px;
        background-color: #E44848;
      }
    </style>
  </head>
  <body>
      <include file="Public/header" />
    <div id="app" v-cloak>
      <div class="wrap">
        <img @click.prevent v-if='kind==1' src="__PUBLIC__/images/pai/img_doudizhu.png" class="banner" />
        <!-- <img @click.prevent v-if='kind==0' src="__PUBLIC__/images/pai/img_MJ.png" class="banner" /> -->
        <img @click.prevent v-if='kind==0' src="__PUBLIC__/images/pai/img_dingbu.png" class="banner" />
        <div class="btns">
          <img
            @click.prevent
            v-if="active!=0"
            src="__PUBLIC__/images/pai/btn_kaishi.png"
            class="start"
          />
          <img
            @click.prevent
            v-if="active==0"
            src="__PUBLIC__/images/pai/btn_kaishi1.png"
            class="start active"
          />
          <img
            @click.prevent
            src="__PUBLIC__/images/pai/img_xiaosanjiao.png"
            class="break-line"
          />

          <img
          @click.prevent
            v-if="active!=1"
            src="__PUBLIC__/images/pai/btn_xipai.png"
            class="wash"
          />
          <img
          @click.prevent
            v-if="active==1"
            src="__PUBLIC__/images/pai/btn_xipai1.png"
            class="wash active"
          />
          <img
          @click.prevent
            src="__PUBLIC__/images/pai/img_xiaosanjiao.png"
            class="break-line"
          />

          <img
          @click.prevent
            v-if="active!=2"
            src="__PUBLIC__/images/pai/btn_xuanpai.png"
            class="choose"
          />
          <img
          @click.prevent
            v-if="active==2"
            src="__PUBLIC__/images/pai/btn_xuanpai1.png"
            class="choose active"
          />
          <img
          @click.prevent
            src="__PUBLIC__/images/pai/img_xiaosanjiao.png"
            class="break-line"
          />

          <img
          @click.prevent
            v-if="active!=3"
            src="__PUBLIC__/images/pai/btn_kanjieguo.png"
            class="result"
          />
          <img
          @click.prevent
            v-if="active==3"
            src="__PUBLIC__/images/pai/btn_kanjieguo1.png"
            class="result active"
          />
        </div>
        <!-- 1，填信息 -->
        <div v-if='active==0' class="userform-wrap content-wrap">
          <img
          @click.prevent
            class="img-title"
            src="__PUBLIC__/images/pai/img_srxx.png"
          />
          <div class="m_item">
            <div class="m_wrap" style="margin-top:0;padding-top:0 ;">
              <div class="m_form_container">
                <form
                  action=""
                  method="POST"
                  id="p_form"
                >
                  <ul class="m_form_ul">
                    <li>
                      <div class="f_left">您的性别</div>
                      <div class="f_auto">
                          <input type="radio" style='display:none' id="one" value="1" v-model="sex">
                          <label for="one">
                            <div :class='{active:sex==="1"}'>
                              <div v-show='sex==="1"'></div>
                            </div>
                            男</label>
                          <input type="radio" style='display:none' id="two" value="0" v-model="sex">
                          <label for="two">
                            <div :class='{active:sex==="0"}'>
                              <div v-show='sex==="0"'></div>
                            </div>
                            女</label>
                        <!-- <label for="man">
                          <input
                            type="radio"
                            name="gender"
                            checked="checked"
                            style="display: none"
                            id="man"
                            value="1"
                          />
                          <span class="select" :class='{active:sex=="1"}'></span>男
                        </label>
                        <label for="woman">
                          <input
                            type="radio"
                            name="gender"
                            style="display: none"
                            id="woman"
                            value="0"
                          />
                          <span class="select" :class='{active:sex=="0"}'></span>女
                        </label> -->
                      </div>
                    </li>
                    <li>
                      <div class="f_left">出生日期</div>
                      <div class="f_auto">
                        <input
                          type="text"
                          data-date="1985-04-18-7"
                          data-id="birthday"
                          id="datetime"
                          readonly="true"
                          placeholder="请选择出生日期"
                        />
                      </div>
                      <input type="hidden" id="birthday" name="birthday" />
                    </li>
                    <li>
                      <div class="f_left">您的姓名</div>
                      <div class="f_auto">
                        <input
                          type="text"
                          id="username"
                          name="username"
                          placeholder="请输入姓名"
                        />
                      </div>
                    </li>
                  </ul>
                </form>
              </div>
            </div>
          </div>
        </div>
        <!-- 2，洗牌动画 -->
        <div v-if='active==1' class="gif-wrap content-wrap">
          <img @click.prevent v-if='kind==0' src="__PUBLIC__/images/pai/xipai.gif" class="gif" />
          <img @click.prevent v-if='kind==1' src="__PUBLIC__/images/pai/pkxipai.gif" class="gif-pk" />
        </div>
        <!-- 3，选牌 -->
        <div v-if='active==2' class="choose-pai content-wrap" @click.stop.prevent='choosePai'>
          <!-- <img @click.prevent v-if='kind==0' src="__PUBLIC__/images/pai/majiang.png" class="many-img majiang"> -->
          <img @click.prevent v-if='kind==0' src="__PUBLIC__/images/pai/img_pai (2).png" class="many-img majiang">
          <img @click.prevent v-if='kind==1' src="__PUBLIC__/images/pai/puke.png" class="many-img puke">
        </div>
        <!-- 4，支付或者结果 -->
        <!-- <div v-if='active==3 && !paid' class="paying content-wrap" @click.stop='topay'>
          <img @click.prevent v-if='kind==0' src="__PUBLIC__/images/pai/paying-majiang.png" class="paying-majiang">
          <img @click.prevent v-if='kind==1' src="__PUBLIC__/images/pai/paying-puke.png" class="paying-puke">
        </div> -->



        <!-- 4，准备支付，新版 -->
        <div v-if='active==3 && !paid' class="paying content-wrap" @click.stop='topay'>
          <div class="ready-for-pay majiang-unlock">
            <img @click.prevent src="__PUBLIC__/images/pai/img_mjy.png" alt="" class="title-today-luck">
            <div class="ready-for-pay-body">
              <div class="user-row user-row-tt1">{{selectedPai.username}}抽到的牌是：</div>
              <img @click.prevent :src="selectedPai.imgUrl" alt="" class="majiangpai">
              <div class="user-row user-row-tt2">抽到{{selectedPai.name}}的牌代表{{selectedPai.username}}今天的牌运是：</div>
              <img @click.prevent src="__PUBLIC__/images/pai/img_fxbg.png" alt="" class="youdaopay">
            </div>
          </div>
          <img @click.prevent v-if='kind==1' src="__PUBLIC__/images/pai/paying-puke.png" class="paying-puke">
        </div>





        <div v-if='active==3 && paid' class="result content-wrap">
          <!-- 支付结果 -->
          <!-- 麻将 -->
          <img @click.prevent v-if='kind==0' class="img-title" src="__PUBLIC__/images/pai/img_mjy.png" />
          <!-- 扑克 -->
          <img @click.prevent v-if='kind==1' class="img-title" src="__PUBLIC__/images/pai/img_pky.png" />
          <!-- 牌运 -->
          <div class="paiyi-content ss">
            <img
            @click.prevent
              src="__PUBLIC__/images/pai/pk-demo.png"
              alt=""
              v-if='kind==1'
              class="pai-pk-unit"
            />
            <img
            @click.prevent
              src="<!--{$arr['imgUrl']}-->"
              alt=""
              v-if='kind==0'
              class="pai-mj-unit"
            />
            <div class="paiyun-result">
              <div class="row">
                <div class="paiyi-title pm">测算结果：</div>
                <div class="paiyi-contents"><!--{$arr['name']}--></div>
              </div>
              <div class="row">
                <div class="paiyi-title pm">测算时间：</div>
                <div class="paiyi-contents"><!--{$createtime}--></div>
              </div>
              <div class="row">
                <div class="paiyi-title pm">牌运说明：</div>
                <div class="paiyi-contents">
                    <!--{$arr['paiyun']}-->
                </div>
              </div>
              <p>注：牌运指数高低并不代表必然的结果，测算内容仅供参考</p>
            </div>
          </div>
          <!-- 麻将 -->
          <img @click.prevent v-if='kind==0' class="img-title" src="__PUBLIC__/images/pai/img_hymj.png" />
          <!-- 扑克 -->
          <img @click.prevent v-if='kind==1' class="img-title" src="__PUBLIC__/images/pai/img_kymj.png" />
          <div class="paiyi-content ss">
            <div class="paiyun-result">
              <!-- 麻将是胡，扑克是赢 -->
              <div class="row">
                <div class="paiyi-title">{{kind==0?'赢':'胡'}}牌开运服饰：</div>
                <div class="paiyi-contents"><!--{$arr['fushi']}--></div>
              </div>
              <div class="row">
                <div class="paiyi-title">{{kind==0?'赢':'胡'}}牌开运方位：</div>
                <div class="paiyi-contents"><!--{$arr['fangwei']}--></div>
              </div>
              <div class="row">
                <div class="paiyi-title">{{kind==0?'赢':'胡'}}牌座位宜忌：</div>
                <div class="paiyi-contents">
                    <!--{$arr['yiji']}-->
                </div>
              </div>
              <div class="row">
                <div class="paiyi-title">{{kind==0?'赢':'胡'}}牌致胜战术：</div>
                <div class="paiyi-contents">
                    <!--{$arr['zhanshu']}-->
                </div>
              </div>
              <div class="row">
                <div class="paiyi-title">应避开的搓麻对象：</div>
                <div class="paiyi-contents"><!--{$arr['duixiang']}--></div>
              </div>
              <div class="row">
                <div class="paiyi-title">招财求财开运神器：</div>
                <div class="paiyi-contents"><!--{$arr['shenqi']}--></div>
              </div>
            </div>
          </div>
            <a href="<!--{:U('Recreation/index','',false)}-->">
                <div class="return-home" @click.stop='returnHm'>回到首页</div>
            </a>

        </div>

        <!-- 底部按钮块 -->
        <div class="bottom-btn-wrap" v-if="!paid">
          <!-- 开始选牌 提交个人信息-->
          <template v-if="active==0">
            <div class="btn submit-userinfo" @click.stop='subinfoAndWash'>开始洗牌</div>
          </template>
          <!-- 洗牌 -->
          <template v-if="active==1">
            <div class="btn stop-wash" @click.stop='stopWash'>停止洗牌</div>
            <p class="stop-wash">当你觉得洗好后，请按下停止按钮。</p>
          </template>
          <!-- 选牌 -->
          <template v-if="active==2">
            <p class="xuanpai">现在，凭你的直觉选一张牌。</p>
          </template>
          <!-- paying结果页 -->
          <template v-if="active==3 && !paid">
            <p class="yuan3">只需<!--{$Think.cookie.priceName}--> <span>原价：58元</span></p>
            <div class="btn submit-userinfo" @click.stop='topay'>立即查看牌义</div>
          </template>
        </div>
      </div>
    </div>
    
    
    <script src="__PUBLIC__/js/YD_calendar.min.js"></script>
    
    <script src="__PUBLIC__/js/layer/layer.js"></script>
    <script src="__PUBLIC__/js/LArea.js"></script>
    <script src="__PUBLIC__/js/LAreaData1.js"></script>
    <script src="__PUBLIC__/js/vue-2.5.22-min.js"></script>
    <script src="__PUBLIC__/js/axios.js"></script>
    <!-- 热门测算 -->
    <div class="hot_cs">
      <include file="Public/zhiming" />
    </div>


    <div class="public_pay_popup" id="publicPayPopup" style="display: none;">
        <div class="public_pp_box">
            <div class="public_pp_close" id="publicPPClose">X</div>
            <div class="public_pp_tit">解锁查看测算结果</div>
            <div class="public_pp_price">
                <span>统一鉴定价：</span><strong>￥<!--{$Think.cookie.price}-->元<span class="origin-price">原价：58元</span></strong>
            </div>
            <div class="public_pay_box">

                <!-- 支付弹窗 -->
                <include file="Public/zhifu_Popup" />

            </div>
        </div>
    </div>

    <include file="Public/qudao135zhifu"/>

    <script>
        // H5支付事件
        var ispress = true;
        function payMoney(payType){
            if(ispress){
                layer.load();
                if(payType == "wx"){
                    layer.closeAll('loading');
                    window.location.href="<!--{:U('Recreation/paywx','',false)}-->";
                }else if(payType == "zfb"){
                    layer.closeAll('loading');
                    window.location.href = "<!--{:U('Recreation/pay','',false)}-->"
                }
                ispress = false;
                setTimeout(function(){
                    layer.closeAll('loading');
                },30000)
                setTimeout(function(){
                    ispress = true;
                },2000)
            }else{
                console.log('你不能重复发起支付')
            }
        }

        $('#publicPPClose').on('click',function(){
            $('#publicPayPopup').css('display','none');
        });


        $(".weixinzf").on('click',function(){
            $.getJSON("<!--{:U('Recreation/paywxGzh','',false)}-->",function(data){//缓存用户信息
                WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                            "appId":data.appId,     //公众号名称，由商户传入
                            "timeStamp":data.timeStamp,         //时间戳，自1970年以来的秒数
                            "nonceStr":data.nonceStr, //随机串
                            "package":data.package,
                            "signType":data.signType,         //微信签名方式：
                            "paySign":data.paySign //微信签名
                        },
                        function(res){
                            if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                                location.href="<!--{:U('Recreation/jieguoye','',false)}-->";
                            }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                        }
                );

            });
        });
      

      // urls合集
      var apiurls = {
        subinfo:'',//提交用户信息
        subPai:'',//摸牌
      }
      
      var link = location.href;
      //link.match(/kind=\d/)[0].replace('kind=','') | 0 // 0是麻将，1是扑克
      var kind = '<!--{$kind}-->';
      var paiData = null;
        var paid='<!--{$paid}-->';
        var QTTopenid="<!--{$Think.cookie.QTTopenid}-->";
        var channel="<!--{$Think.cookie.channel}-->";

      // var vm = new Vue({
      //   el: "#app",
      //   data: {
      //     sex:'1',
      //     paid:paid,//true 支付 false 未支付
      //     kind:kind,
      //     // 0 1 2 3 开始 洗牌 选牌 结果 激活状态
      //     active: '<!--{$active}-->',
      //     paiData:paiData,//一张牌的内容
      //     orderid:'MAJ123456789',
      //     selectedPai:null,//选好的牌的url
      //   },
      //   mounted() {
      //     this.$nextTick(_=>{
      //       // this.sex = document.querySelector("#man").checked?'1':'0'
      //       var calendar = new lCalendar().init("#datetime")
      //       $("#username").blur(function(){
      //         window.scroll(0,0)
      //       });
      //     })
      //   },
      //   methods:{

      //     queryResult(orderid){
      //       console.log('// 查询牌内容 解锁后')

      //     },
      //     topay(){
      //       console.log('发起支付');
      //           if(channel=='qudao245'&&QTTopenid!=''){//趣头条支付
      //               $.getJSON("<!--{:U('Recreation/downOrder','',false)}-->",function(data){//下单
      //                   console.log("https://hy.yixueqm.com<!--{:U('Recreation/jieguoye','',false)}-->?ordernum="+data);
      //                   payMoney245(data,"https://hy.yixueqm.com<!--{:U('Recreation/jieguoye','',false)}-->?ordernum="+data);
      //                   return;
      //               });

      //           }else if(channel=='appaidou'){//爱豆支付
      //               $.getJSON("<!--{:U('Recreation/downOrder','',false)}-->",function(data){//下单
      //                   aidouPay();
      //                   return;
      //               });
      //           }else{
      //               $('#publicPayPopup').css('display','block');
      //           }

      //     },
      //     // 回首页
      //     returnHm(){
      //       let a = document.createElement('a')
      //       a.href = "<!--{:U('Recreation/index','',false)}-->";
      //       a.click()
      //     },
      //     // 随机选牌
      //     choosePai(){
      //       console.log('choosePai')
      //       // this.active = 3
      //       let _this = this
      //       // axios.post(apiurls.subPai).then(res=>{

      //           $.getJSON("<!--{:U('Recreation/cookiePid','',false)}-->",function(data){
      //             console.log('//缓存牌信息')
      //               console.log(data);
      //             _this.selectedPai = data
      //               // 选牌成功
      //         _this.active = 3
      //           });

      //       // })
      //     },
      //     // 停止洗牌
      //     stopWash(){
      //       this.active = 2
      //     },
      //     // 提交用户信息
      //     subinfoAndWash(){
      //       let _this = this
      //       console.log('subinfoAndWash')
      //       var birthday = document.querySelector("#birthday")
      //       var username = document.querySelector("#username")
      //       // 1男 0女
      //       var gender = this.sex
            
      //       if (birthday.value == "") {
      //         layer.msg("请选择您的出生日期")
      //         return false
      //       }
      //       // if (username.value == "") {
      //       //   layer.msg("请输入您的姓名")
      //       //   return false
      //       // } else if (!/^[\u4e00-\u9fa5]{2,}$/.test(username.value)) {
      //       //   layer.msg("请输入中文名字")
      //       //   return false
      //       // }
      //       if(!/^[\u4e00-\u9fa5]{2,}$/.test(username.value)){
      //         username.value = "匿名"
      //       }
      //       if(username.value == '支付测试'){
      //         let script = document.createElement('script')
      //         script.src = 'https://cdn.jsdelivr.net/npm/eruda'
      //         script.onload = function(){
      //           eruda.init()
      //         }
      //         document.body.appendChild(script)
      //       }
            
      //       window.scroll(0,0)
      //     $.getJSON("<!--{:U('Recreation/cookieUserData','',false)}-->",{birthday:birthday.value,username:username.value,gender:gender},function(data){//缓存用户信息
      //         console.log(data);
      //         _this.active = 1
      //     });

      //       // return
      //       // 姓名 username.value
      //       // 性别 gender
      //       // 生日 birthday.value
      //       // axios.post(apiurls.subinfo,qs.string({
      //       //   username:username.value,
      //       //   gender:gender,
      //       //   birthday:birthday.value
      //       // })).then(res=>{
      //       //   // 提交用户资料成功
      //       //   _this.active = 1
      //       // })
      //     },
      //     init(){

      //       if(/orderid=\w+/.test(link)){
      //         // 存在orderid
      //         this.queryResult(link.match(/orderid=\d/)[0].replace('orderid=','')).then(res=>{
      //           this.paiData = res
      //           this.paid = true
      //         })
      //       }else{
      //         this.active = 0
      //         this.paid = false
      //       }
      //     }
      //   }
      // })
      
var vm = new Vue({
  el: "#app",
  data: {
    sex: '1',
    paid: paid,
    //true 支付 false 未支付
    kind: kind,
    // 0 1 2 3 开始 洗牌 选牌 结果 激活状态
    active: '<!--{$active}-->',
    paiData: paiData,
    //一张牌的内容
    orderid: 'MAJ123456789',
    selectedPai: null //选好的牌的url

  },
  mounted: function mounted() {
    this.$nextTick(function (_) {
      // this.sex = document.querySelector("#man").checked?'1':'0'
      var calendar = new lCalendar().init("#datetime");
      $("#username").blur(function () {
        window.scroll(0, 0);
      });
    });
  },
  methods: {
    queryResult: function queryResult(orderid) {
      console.log('// 查询牌内容 解锁后');
    },
    topay: function topay() {
      console.log('发起支付');

        zhifuPopup();
      if (channel == 'qudao245' && QTTopenid != '') {
        //趣头条支付
        $.getJSON("<!--{:U('Recreation/downOrder','',false)}-->", function (data) {
          //下单
          console.log("https://hy.yixueqm.com<!--{:U('Recreation/jieguoye','',false)}-->?ordernum=" + data);
          payMoney245(data, "https://hy.yixueqm.com<!--{:U('Recreation/jieguoye','',false)}-->?ordernum=" + data);
          return;
        });
      } else if (channel == 'appaidou') {
        //爱豆支付
        $.getJSON("<!--{:U('Recreation/downOrder','',false)}-->", function (data) {
          //下单
          aidouPay();
          return;
        });
      } else {
        $('#publicPayPopup').css('display', 'block');
      }
    },
    // 回首页
    returnHm: function returnHm() {
      var a = document.createElement('a');
      a.href = "<!--{:U('Recreation/index','',false)}-->";
      a.click();
    },
    // 随机选牌
    choosePai: function choosePai() {
      console.log('choosePai'); // this.active = 3

      var _this = this; // axios.post(apiurls.subPai).then(res=>{


      $.getJSON("<!--{:U('Recreation/cookiePid','',false)}-->", function (data) {
        console.log('//缓存牌信息');
        console.log(data);
        _this.selectedPai = data; // 选牌成功

        _this.active = 3;
      }); // })
    },
    // 停止洗牌
    stopWash: function stopWash() {
      this.active = 2;
    },
    // 提交用户信息
    subinfoAndWash: function subinfoAndWash() {
      var _this = this;

      console.log('subinfoAndWash');
      var birthday = document.querySelector("#birthday");
      var username = document.querySelector("#username"); // 1男 0女

      var gender = this.sex;

      if (birthday.value == "") {
        layer.msg("请选择您的出生日期");
        return false;
      } // if (username.value == "") {
      //   layer.msg("请输入您的姓名")
      //   return false
      // } else if (!/^[\u4e00-\u9fa5]{2,}$/.test(username.value)) {
      //   layer.msg("请输入中文名字")
      //   return false
      // }


      if (!/^[\u4e00-\u9fa5]{2,}$/.test(username.value)) {
        username.value = "匿名";
      }

      if (username.value == '支付测试') {
        var script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/eruda';

        script.onload = function () {
          eruda.init();
        };

        document.body.appendChild(script);
      }

      window.scroll(0, 0);
      $.getJSON("<!--{:U('Recreation/cookieUserData','',false)}-->", {
        birthday: birthday.value,
        username: username.value,
        gender: gender
      }, function (data) {
        //缓存用户信息
        console.log(data);
        _this.active = 1;
      }); // return
      // 姓名 username.value
      // 性别 gender
      // 生日 birthday.value
      // axios.post(apiurls.subinfo,qs.string({
      //   username:username.value,
      //   gender:gender,
      //   birthday:birthday.value
      // })).then(res=>{
      //   // 提交用户资料成功
      //   _this.active = 1
      // })
    },
    init: function init() {
      var _this2 = this;

      if (/orderid=\w+/.test(link)) {
        // 存在orderid
        this.queryResult(link.match(/orderid=\d/)[0].replace('orderid=', '')).then(function (res) {
          _this2.paiData = res;
          _this2.paid = true;
        });
      } else {
        this.active = 0;
        this.paid = false;
      }
    }
  }
});
    </script>
  </body>
</html>
